<template>
  <view class="container">
    <view class="points-summary">
      <view class="points-circle">{{ points }}</view>
      <view class="points-label">可用积分</view>
      <button class="points-shop">积分商城</button>
    </view>

    <view class="tabs">
      <button :class="{ active: activeTab === 'detail' }" @click="activeTab = 'detail'">积分明细</button>
      <button :class="{ active: activeTab === 'tasks' }" @click="activeTab = 'tasks'">积分任务</button>
    </view>

    <view v-if="activeTab === 'detail'" class="detail-list">
      <view v-for="(item, index) in details" :key="index" class="detail-item">
        <view class="left-info">
          <view class="item-description">{{ item.description }}</view>
          <view class="item-date">{{ item.date }}</view>
        </view>
        <view :class="{ positive: item.points > 0, negative: item.points < 0 }" class="item-points">
          {{ item.points }}
        </view>
      </view>
    </view>
    <!-- 可在此添加积分任务的部分 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      points: 666,
      activeTab: 'detail',
      details: [
        { description: '积分兑换', date: '2023-01-12 15:00', points: -2000 },
        { description: '图书阅读', date: '2023-01-12 15:00', points: +10 },
        { description: '图书阅读', date: '2023-01-12 15:00', points: +10 },
        { description: '图书阅读', date: '2023-01-12 15:00', points: +10 },
      ],
    };
  },
};
</script>

<style>
.container {
  padding: 16px;
  background-color: white;
}

.points-summary {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}

.points-circle {
  font-size: 24px;
  font-weight: bold;
}

.points-label {
  margin-top: 8px;
  font-size: 16px;
}

.points-shop {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 16px;
  color: blue;
  background: none;
  border: none;
}

.tabs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.tabs button {
  flex: 1;
  padding: 8px;
  background: none;
  border: none;
}

.tabs .active {
  font-weight: bold;
  color: blue;
  border-bottom: 2px solid blue;
}

.detail-list {
  background-color: #f9f9f9;
  padding: 8px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

.left-info {
  display: flex;
  flex-direction: column;
}

.item-description {
  font-size: 16px;
  font-weight: bold;
}

.item-date {
  font-size: 12px;
  color: #888;
}

.item-points {
  text-align: right;
  font-size: 16px;
}

.positive {
  color: green;
}

.negative {
  color: red;
}
</style>